<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" /><title>Mergely - Simple Example</title>
	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content="Merge and Diff your documents with diff online and share" />
	<meta name="keywords" content="diff,merge,compare,jsdiff,comparison,difference,file,text,unix,patch,algorithm,saas,longest common subsequence" />
	<meta name="author" content="Jamie Peabody" />

	<!-- Requires jQuery -->
	<script src="lib/mergely/jquery.min.js" type="text/javascript"></script>
	
	<!-- Requires CodeMirror -->
	<script type="text/javascript" src="lib/mergely/codemirror.js"></script>
	<link type="text/css" rel="stylesheet" href="lib/mergely/codemirror.css" />
	
	<!-- Requires Mergely -->
	<script type="text/javascript" src="lib/mergely/mergely.js"></script>
	<link type="text/css" rel="stylesheet" href="lib/mergely/mergely.css" />

	<style type='text/css'>
		.container {
			height: 85vh;
			margin: 0 .5em;
		}
		.mergely.ch.a.rhs {
			background-color: #cfffa3;
		}
		.mergely.ch.d.lhs {
			background-color: #ffe9e9; text-decoration: none; color: #d11 !important;
		}
	</style>
	
	<script type="text/javascript">
	window.onload=function() {
		setTimeout(function() {
			$('#compare').mergely({
				editor_width: 'calc(50% - 25px)',
				editor_height: 'auto',
				height: 'auto',
				resize_timeout: 100,
				sidebar: false,
				viewport: false,
				wrap_lines: true,
				cmsettings: { 
					readOnly: false,
					lineSeparator: '\r\n',
					lineWrapping: true,
					cursorHeight: 0.95
				},
				lhs: function(setValue) {
					setValue(exo_lhsvalue_placeholder);
				},
				rhs: function(setValue) {
					setValue(exo_rhsvalue_placeholder);
				}
			});

			$('#scrollup').click(function() {
				$('#compare').mergely('scrollTo', 'lhs', 1);
				$('#compare').mergely('scrollTo', 'rhs', 1);
			});

			$('#prev').click(function() {
				$('#compare').mergely('scrollToDiff', 'prev'); 
			});

			$('#next').click(function() {
				$('#compare').mergely('scrollToDiff', 'next'); 
			});

			$('#clear').click(function() {
				$('#compare').mergely('scrollTo', 'lhs', 1);
				$('#compare').mergely('scrollTo', 'rhs', 1);
				document.getElementById("file1name").innerHTML = "";
				document.getElementById("file2name").innerHTML = "";
				setTimeout(function() {
					$('#compare').mergely('clear', 'lhs'); 
					$('#compare').mergely('clear', 'rhs'); 
				}, 200);
			});

			$('#cleardiff').click(function() {
				$('#compare').mergely('unmarkup'); 
			});

			$('#togglewrap').click(function() {
				changeOptions(function(x) { x.wrap_lines = !x.wrap_lines; }); 
			});

			function changeOptions(changer) {
				var options = $('#compare').mergely('options');
				changer(options);
				$('#compare').mergely('options', options);
				//comp.mergely('update');
			}

		},1000);
	}
	</script>
</head>
<body>
	<div class="container">
		<table style="width: 100%;">
			<tr>
				<td style="width: 55%">
					<button id="next" title="Next diff">Next diff</button>
					<button id="prev" title="Previous diff">Prev diff</button>
					<button id="cleardiff" title="Clear diffs">Clear diffs</button>
					<button id="togglewrap" title="Toggle wrap">Toggle wrap</button>
					<button id="scrollup" title="Scroll top">Scroll to top</button>
					<button id="clear" title="Clear boxes">Clear boxes</button>
				</td>
				<td align>exo_instructions_placeholder</td>
			</tr>
		</table>
		<table style="width: 100%;">
			<tr>
                           <td style="width: 50%;"><p id="file1name">exo_file1name_placeholder</p></td>
                           <td style="width: 50%;"><p id="file2name">exo_file2name_placeholder</p></td>
			</tr>
		</table>
		<div id="compare">
		</div>
	</div>
</body>
</html>
